<template>
  <div class="home">
    <!-- 底部导航 -->
    <van-tabbar v-model="active">
  <van-tabbar-item
    replace name="index"
  >
    <span>首页</span>
    <img
      slot="icon"
      slot-scope="props"
      :src="props.active ? icon.index.active : icon.index.inactive"
    >
  </van-tabbar-item>
  <van-tabbar-item
    replace name="bottom"
  >
    <span>发现</span>
    <img
      slot="icon"
      slot-scope="props"
      :src="props.active ? icon.bottom.active : icon.bottom.inactive"
    >
  </van-tabbar-item>
   <!-- <van-tabbar-item
    replace name="photo"
  >
    <span>制作</span>
    <img
      slot="icon"
      slot-scope="props"
      :src="props.active ? icon.photo.active : icon.photo.inactive"
    >
  </van-tabbar-item>
   <van-tabbar-item
    replace name="myhome"
  >
    <span>我的</span>
    <img
      slot="icon"
      slot-scope="props"
      :src="props.active ? icon.myhome.active : icon.myhome.inactive"
    >
  </van-tabbar-item> -->
</van-tabbar>
    <!-- 页面 -->
    <div>
      <div v-show="active=='index'">
        <index></index>
      </div>
      <div v-show="active=='bottom'">
        <bottom></bottom>
      </div>
      <div v-show="active=='photo'">
        <photo :active="setactive"></photo>
      </div>
      <div v-show="active=='myhome'">
       <myhome></myhome>
      </div>
    </div>
  </div> 
</template>

<script>
import index from '../views/index'
import bottom from '../views/bottom'
import photo from '../views/photo'
import myhome from '../views/myhome'

export default {
  data(){
    return{
      active:'index',
      active1:'index',
       icon:{
        index:{
          active:'img/head3.png',
          inactive:'img/head1.png'
        },
        bottom:{
          active:'img/fx2.png',
          inactive:'img/fx1.png'
        },
        photo:{
          active:'img/fx2.png',
          inactive:'img/fx1.png'
        },
        myhome:{
          active:'img/myhome5.png',
          inactive:'img/我的.png'
        }
      }
    }
  },
  watch:{
    active(){
      scrollTo(0,0)   //滚动条  回到顶部
      if(this.active!="photo"){
        this.active1=this.active
      }
    }
  },
  methods:{
    setactive(){
      this.active=this.active1;
    },
  },
  components: {
    'index':index,
    'bottom':bottom,
    'photo':photo,
    'myhome':myhome,
    
  }
}
</script>
